<template>
  <div class="loan1">
   <headerNav>
         <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png" class="returnImg"/>
         <div class="loan">借款</div>
         <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png" class="rightImg"/>
   </headerNav>
   <div class="loan_title">
     <img src="http://file.rzkeji.com/web/loveciy/img/tabBar/circle.png"/>
     <div>蓝卡用户</div>
   </div>
   <div class="loan_content">
      <div class="loan_amount">借款金额</div>
      <div class="loan_number">3000<span>元</span></div>

      <div class="loan_length">借款时长</div>
      <div class="loan_day">借<input type="number" onfocus value="7" />天</div>
   </div>
   
   <div class="you" @click="toShow">暂无优惠券   ></div>
   <div class="commit_information">
     <div>开始申请</div>
   </div>

   <vue-pickers
      :show="show"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      @cancel="close"
      @confirm="confirmFn"></vue-pickers>
  </div>
</template>

<script>
import headerNav from '@/components/header_nav'
import vuePickers from 'vue-pickers'
export default {
  name: 'loan',
  components:{
    headerNav,
    vuePickers
  },
  data () {
    return {
       show: false,
      columns: 1,
      defaultData: [
        {
          text: 1999,
          value: 1999
        }
      ],
       pickData: {
        // 第一列的数据结构
        data1: [
          {
            text: 1999,
            value: 1999
          },
          {
            text: 2001,
            value: 2001
          },
          {
            text: 2002,
            value: 2002
          },
          {
            text: 2003,
            value: 2003
          },
          {
            text: 2004,
            value: 2004
          },
          {
            text: 2005,
            value: 2005
          },
        ]
      }
    }
  },
  mounted(){
  },
  methods:{
   close() {
      console.log(123)
      this.show = false
    },
    confirmFn(val) {
      console.log(val)
      this.show = false
      this.res = val
      this.defaultData = [val.select1]
    },
    toShow() {
      this.show = true
    }
  }
}
</script>
<style scoped>
.loan1{width: 100%;background-color: #f0f0f0;padding-top: 50px;}
.loan1 div.loan{width: 100%;height: 100%;line-height: 50px;text-align: center;font-size: 18px;color: #fff;background-image: linear-gradient(-180deg,#3583f1,#1862E2);border-bottom: 1px solid #3583f1;}
.loan_title{background-color: #4288ee;height: 45px;line-height: 45px;padding: 0 15px;color: #eee;font-size: 16px;display: flex;justify-content: row;}
.loan_title img{height: 21px;width: 33px;margin-top: 12px;}
.loan_title div{line-height: 45px;margin-left: 5px;}
.loan_content{width: 100%;height: 214px;background-image: linear-gradient(-180deg,#3583f1,#1862E2);padding-top: 10px;}
.loan_amount,.loan_length{width: 78px;height: 24px;border: 1px solid #fff;color: #fff;border-radius: 13px;text-align: center;line-height: 24px;margin:0 auto;}
.loan_number{width: 100%;height: 30px;line-height: 30px;color: #fff;font-size: 50px;font-weight: 400;text-align: center;line-height: 30px;margin-top: 20px;}
.loan_number span{font-size: 14px;}
.loan_length{margin-top: 30px;}
.loan_day{width: 58px;height: 30px;background-color: #fff;color: #3583f1;border: 1px solid #aac6f8;
    border-radius: 5px;padding: 6px 30px;line-height: 30px;font-size: 16px;margin:15px auto;}
.loan_day input{width: 20px;text-align: center;outline: none;border: 0px;color: #3583f1;line-height: 30px;font-size: 16px;}
.you{line-height: 50px;color: #3583f1;font-size: 15px; float: right;margin-right: 20px;}

.commit_information{position: fixed;bottom: 0;height: 60px;width: 100%;background-color: #f0f0f0;z-index: 99;}
.commit_information div{border-radius: 5px;line-height: 40px;margin-top: 10px;margin-left: 5%;text-align: center;color: #fff;font-size: 18px;width: 90%;background-color: #3583f1;}
</style>
